import React, { useState, useEffect } from "react";
import { Input, Button, Table } from "antd";
import { useNavigate, useLocation } from "react-router-dom";
import { SearchOutlined, RedoOutlined } from "@ant-design/icons";
import DictStyle from "./dict.module.scss";
import { dictColumn } from "./column";
import { getDictList } from "@/api/index.js";

export default function Index() {
  const [paginationObj, setPaginationObj] = useState({ page: 1, size: 10 });
  const [loading, setLoading] = useState(false);
  const [list, setList] = useState([]);
  const [dictName,setdictName] = useState("");
  const nav = useNavigate();
  const location = useLocation();
  useEffect(() => {
    getList();
  }, []);

  const getList = async (requestObj) => {
    const res = await getDictList(requestObj);
    console.log("dictlist", res);
    setList(res.data);
  };

  const handlePageChange = (page, size) => {
    // getList({ page, size });
  };

  const handleSizeChange = (page, size) => {
    // getList({ page, size });
  };

  const handleToData = (id) => {
    console.log("跳转id", id, location);
    nav(`/site/dictData?dictId=${id}`, {
      state: { originPath: location.pathname },
    });
  };
  //修改dictName 
  const handleDictName = (e)=>{
    setdictName(e.target.value);
  }
// 重置
  const handleResetSearch = ()=>{
    setdictName("");
  }
  // 查询
  const handleSearch =()=>{
    let requestObj = {};
    if(dictName) {
      requestObj.dictName = dictName;
    }
    getList(requestObj);
    handleResetSearch();
  }
  const columns = dictColumn({ handleToData });
  return (
    <div className={DictStyle.dict}>
      <div className={DictStyle.top}>
        <div className={DictStyle.search}>
          <h3>标签名称:</h3>
          <Input
            placeholder="请输入标签名称"
            value={dictName}
            onChange={handleDictName}
            style={{ width: "200px", marginRight: "10px" }}
          />
          <Button
            icon={<SearchOutlined />}
            type="primary"
            className={DictStyle["ant-btn"]}
            onClick={handleSearch}
            
          >
            查找
          </Button>
          <Button icon={<RedoOutlined />} className={DictStyle["ant-btn"]} onClick={handleResetSearch}>
            重置
          </Button>
        </div>
        
      </div>
      <div className={DictStyle["table-container"]}>
          <Table
            columns={columns}
            dataSource={list}
            rowKey={(record) => record.id}
            loading={loading}
            pagination={{
              pageSize: paginationObj.pageSize,
              current: paginationObj.currentPage,
              pageSizeOptions: [3, 5, 10, 20],
              showSizeChanger: true,
              total: paginationObj.total,
              showTotal: (total) => `共${total}条`,
              onChange: handlePageChange,
              onShowSizeChange: handleSizeChange,
            }}
          />
        </div>
    </div>
  );
}
